import React from 'react'
import { Spin, Badge, Icon/*, Dropdown*/, Popover } from 'antd'
import { Tabs } from '@/components/Tabs';
import { List } from '@/components/Grid';

import styles from './index.less';

export default class Noitce extends React.PureComponent {
	static Tab = Tabs.TabPane;
	static defaultProps = {
		loading: false
	}
	getContent() {
		const {
			loading,
			onTagChange,
			children
		} = this.props
		if (!children) return null

		return (
			<React.Fragment>
				<Spin spinning={loading} delay={0}>
					<Tabs onChange={onTagChange}>
						{
							React.Children.map(children, (child, i) => {
								const {
									name,
									title,
									count,
									data
								} = child.props
								
								const total = data && data.length ? data.length : 0
								const msgCount = count || count === 0 ? count : total
								const tab = msgCount > 0 ? `${title} (${msgCount})` : title
								return (
									<Tabs.TabPane tab={tab} key={name || i}>
										<List 
											data={data}
											renderItem={item => (
												<List.Item>{item.text}</List.Item>
											)}
											>
										</List>
									</Tabs.TabPane>
								)
							})
						}
					</Tabs>
				</Spin>
			</React.Fragment>
		)
	}
	render() {
		const {
			count,
			icon = <Icon type="notification" />
		} = this.props
		const content = this.getContent()

		const trigger = (
				<span className={styles.trigger}>
					<Badge count={count}>
		                {icon}
		            </Badge>
		        </span>
			)
		if (!content) {
			return trigger
		}
		return (
			<Popover
				content={content}
				overlayClassName={styles.container}
				placement="bottomRight"
				arrowPointAtCenter
				trigger="click"
				>
				{trigger}
			</Popover>
		)
		// return (
		// 	<Dropdown
		// 		overlay={content}
		// 		overlayClassName={styles.container}
		// 		placement="bottomRight"
		// 		trigger={['click']}
		// 		>
		// 		{trigger}
		// 	</Dropdown>
		// )
	}
}